import React, { useEffect, useState } from 'react';
import { Breadcrumb } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import { NavLink, useLocation } from 'react-router-dom';

const breadcrumbNameMap = {
  '/home/main': '概览',
  '/user/list': '成员管理'
}
const BreadcrumbCom = () => {
  const [breadName, setBreadName] = useState(null)
  const [extraBreadcrumbItems, setExtraBreadcrumbItems] = useState(null)
  const { pathname } = useLocation()
  useEffect(() => {
    const pathMap = new Map([
      ['/home/main', '概览'],
      ['/user/list', '成员管理'],
    ])
    const pathData = pathMap.get(pathname)
    setBreadName(pathData);
    getPath()
  }, [pathname])

  const getPath = () => {
    //获取当前的路由地址
    const res = pathname.split('/').filter(i => i)
    const arr = res.map((_, index) => {
      let url = `/${res.slice(0, index + 1).join('/')}`
      console.log('url', url)
      return <Breadcrumb.Item key={url}>{breadcrumbNameMap[url]}</Breadcrumb.Item>
    })
    setExtraBreadcrumbItems(pre => ({
      ...pre,
      arr
    }))
    console.log('extraBreadcrumbItems', extraBreadcrumbItems)
  }
  return (
    <>
      <Breadcrumb style={{ padding: '0 50px' }}>
        <Breadcrumb.Item href='/home/main'>
          <HomeOutlined />
        </Breadcrumb.Item>
        <Breadcrumb.Item>{breadName}</Breadcrumb.Item>
      </Breadcrumb>
    </>
  );
};

export default React.memo(BreadcrumbCom);